<template>
  <div>
    <van-tabs
      color="#37B5B5"
      title-inactive-color="#999999"
      title-active-color="#333333"
      v-model="active"
      @click="onClick"
    >
      <van-tab title="未处理">
        <div v-if="earlyWarning.length>0" style="margin-bottom: 100px">
          <van-checkbox
            checked-color="#37B5B5"
            @click="allSelected"
            label-position="right"
            :class="['font-14' ,'titleAll']"
            v-model="checked"
            ><span :class="[ checked?'col-333333':'col-999999' ]">全选</span></van-checkbox
          >
          <div class="checkStyle" v-for="(item, index) in earlyWarning" :key="index">
            <div class="checkTitles">
              <van-checkbox
                checked-color="#37B5B5"
                :value="item.flag"
                @click="titleChange(index)"
                class="font-14 col-333333"
                >{{
                  item.type == 0
                    ? '温度预警'
                    : item.type == 1
                    ? '运动量预警'
                    : item.type == 2
                    ? '产羔预警'
                    : item.type == 3
                    ? '干奶期预警'
                    : '防疫预警'
                }}（{{ item.count }}）</van-checkbox
              >
              <img
                width="8px"
                height="8px"
                :class="[item.identify ? 'triangleRotation' : '']"
                src="../../assets/img/bzsc/selectDown.png"
                @click="foldData(index)"
              />
            </div>
            <div v-if="item.identify && item.warningRecordList.length > 0">
              <van-cell
                :class="['content', key >= item.warningRecordList.length - 1 ? 'borderNone' : '']"
                v-for="(items, key) in item.warningRecordList"
                :key="key"
                clickable
              >
                <div>
                  <van-checkbox @click="contentChanges(index, key)" :value="items.flags" checked-color="#37B5B5" />
                </div>
                <div class="col-666666 m-r-10 font-13 line-text-out">
                  <p class="col-333333 line-text-out" style="font-size: 14px">
                    {{ items.earLabelNo }}
                  </p>
                  <p>项圈号：{{ items.necklaceNo }}｜{{ items.houseName }}</p>
                  <p>{{ items.createTime }}</p>
                  <p>{{ items.warningContent }}</p>
                </div>
              </van-cell>
            </div>
          </div>
        </div>
        <temporarily-data v-else />
      </van-tab>
      <van-tab title="已处理">
        <van-pull-refresh v-if="active == '1'" v-model="refreshing" @refresh="onRefresh">
          <van-list v-if="list.length>0" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="(items, key) in list" :key="key" class="approvalItem contents">
              <div class="flex-between font-14 line-height-3">
                <div class="col-333333 font-15 m-r-10">
                  <img
                    width="13px"
                    height="14px"
                    style="margin-top: 5px; margin-right: 5px"
                    :src="items.warningType == 2 ? require('../../assets/img/yj2.png') : items.warningType == 3 ? require('../../assets/img/yj3.png') : require('../../assets/img/yj4.png')"
                  />{{ items.earLabelNo }}
                </div>
              </div>
              <div class="flex-between font-13 line-height-3">
                <div class="marRight col-666666 m-r-10 line-text-out">项圈号：{{ items.necklaceNo }}｜{{ items.houseName }}</div>
              </div>

              <div class="flex-between font-13 line-height-3">
                <div class="marRight col-666666 m-r-10 line-text-out">{{ items.createTime }}</div>
              </div>
              <div class="flex-between font-13 line-height-3">
                <div class="marRight col-666666 line-text-out">{{ items.warningContent }}</div>
              </div>
            </van-cell>
          </van-list>
          <temporarily-data v-else />
        </van-pull-refresh>
      </van-tab>
    </van-tabs>

    <div v-if="active == 0" class="m-b-10 shop">
      <div @click="dealWith" class="bottom col-37B5B5 font-16 line-height-2" style="justify-content: center">
        处理（{{ totalQuantity }}）
      </div>
    </div>
  </div>
</template>
<script>
import {
  Form,
  Field,
  Calendar,
  RadioGroup,
  Radio,
  Dialog,
  Toast,
  DatetimePicker,
  Picker,
  Button,
  Icon,
  Cell,
  Tab,
  Tabs,
  Collapse,
  CollapseItem,
  Checkbox,
  CheckboxGroup,
  Popup,
  Image,
  PullRefresh,
  List
} from 'vant'
import dayjs from 'dayjs'
import { getValue, setValue } from '@/utils/auth'
import { postHandle, getHandle } from '@/api'
import TemporarilyData from '@/components/temporarilyData'
export default {
  name: 'jobPlacement',
  components: {
    TemporarilyData,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Cell.name]: Cell,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [PullRefresh.name]: PullRefresh,
    [List.name]: List
  },
  data() {
    return {
      refreshing: false,
      activeNames: [],
      dataOalist: [],
      active: 0,
      checked: false,
      lists: [],
      result: [],
      resultSon: '',
      list: [],
      loading: false,
      finished: false,
      houseInfoId: getValue('fzmHourseId') || '',
      params: {
        page: 1,
        perPage: 10,
        houseInfoId: getValue('fzmHourseId') || '',
        warningStatus: 1
      },
      earlyWarning: [],
      totalQuantity: 0
    }
  },
  created() {},
  mounted() {
    this.earlyWarningData()
  },
  methods: {
    allNum() {
      let resultSon = []
      this.earlyWarning.forEach((item, index) => {
        item.warningRecordList.forEach((items, key) => {
          if (items.flags == true) {
            this.totalQuantity += 1
            resultSon.push(items.id)
          }
        })
      })
      this.resultSon = resultSon.join(',')
      this.totalQuantity = resultSon.length
    },
    contentChanges(index, key) {
      const list = JSON.parse(JSON.stringify(this.earlyWarning))
      list[index].warningRecordList[key].flags = !list[index].warningRecordList[key].flags
      let subscript = list[index].warningRecordList.map(item => item.flags).indexOf(false)
      list[index].flag = subscript == -1 ? true : false
      let twoSub = list.map(item => item.flag).indexOf(false)
      this.checked = twoSub == -1 ? true : false

      this.earlyWarning = list
      this.allNum()
    },
    titleChange(index) {
      const list = JSON.parse(JSON.stringify(this.earlyWarning))
      list[index].flag = !list[index].flag
      list[index].warningRecordList.forEach((item, key) => {
        item.flags = list[index].flag
      })
      let twoSub = list.map(item => item.flag).indexOf(false)
      this.checked = twoSub == -1 ? true : false
      this.earlyWarning = list
      this.allNum()
    },
    foldData(index) {
      const list = JSON.parse(JSON.stringify(this.earlyWarning))
      list[index].identify = !list[index].identify
      this.earlyWarning = list
    },
    dealWith() {
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      postHandle('/agri/api/yzbzh/warningRecord/handle', { ids: this.resultSon }).then(res => {
        if (res.status == 0) {
          this.earlyWarningData()
          this.active = 1
          this.params.page = 1
          this.refreshing = true
          this.onLoad()
        } else {
          Toast(res.msg)
        }
      })
    },
    earlyWarningData() {
      getHandle('/agri/api/yzbzh/warningRecord/getWarningTypeQueryList', {
        houseInfoId: this.houseInfoId,
        warningStatus: 0
      }).then(res => {
        if (res.status == 0) {
          this.earlyWarning = res.data
          this.earlyWarning.forEach((item, index) => {
            item.flag = false
            item.identify = false
            item.warningRecordList.forEach((items, key) => {
              items.flags = false
            })
          })
        }
      })
    },
    allSelected() {
      const list = JSON.parse(JSON.stringify(this.earlyWarning))
      list.forEach((item, index) => {
        item.flag = this.checked
        item.warningRecordList.forEach((items, key) => {
          items.flags = this.checked
        })
      })
      this.earlyWarning = list
      this.allNum()
    },
    onClick(e) {
      if(e == 1){
        this.refreshing = true
        this.params.page = 1
        this.onLoad()
      }
    },
    // 卡片列表
    onRefresh() {
      this.params.page = 1
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    onSearch() {
      this.params.page = 1
      this.list = []
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    onLoad() {
      console.log(777)
      getHandle('/agri/api/yzbzh/warningRecord/queryListPage', this.params).then(res => {
        if (this.refreshing) {
          this.list = []
          this.refreshing = false
        }
        this.list = this.list.concat(res.data.rows)
        this.loading = false

        if (this.list.length >= res.data.count) {
          this.finished = true
        } else {
          this.params.page = this.params.page + 1
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.triangleRotation {
  transform: rotate(180deg);
}
.checkTitles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eeeeee;
  padding: 13px 16px;
  color: #333333;
  font-size: 15px;
}
.checkStyle {
  background-color: #fff;
  width: 90%;
  margin: auto;
  margin-bottom: 10px;
  border-radius: 6px;
}
.van-checkbox-group {
  width: 90%;
  margin: auto;
}
.van-collapse-item {
  margin-bottom: 10px;
  border-radius: 6px;
}
.van-cell {
  // margin: 0 10px;
  padding: 0;
}
.content {
  width: 90%;
  margin: auto;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
::v-deep .van-collapse-item__content {
  padding: 0px !important;
}
.van-cell__value {
  // padding: 10px 0;
  display: flex;
  align-items: center;
  > div:first-child {
    margin-right: 10px;
  }
}
.titleBox {
  margin-left: 2px;
  margin-right: 10px;
}
// .van-cell__value--alone{
//   padding: 10px 0;
// }
.titleAll {
  // position: absolute;
  // top: 20px;
  // float: right;
  padding: 12px 34px;
}
.van-cell__title {
  z-index: 10px;
}

.topCeiling {
  position: fixed;
  top: 0;
  z-index: 1;
}
.topDate {
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  > p {
    font-size: 15px;
    &:first-child {
      width: 40%;
    }
    &:last-child {
      width: 40%;
    }
  }
}
.van-field__control {
  border: 0 !important;
}
.contents {
  //   border-bottom: 1px solid #eee;
  > .van-cell__value {
    flex-direction: column !important;
    align-items: flex-start;
  }

  padding: 10px 15px;
}
.marRight {
  margin-left: 18px;
}
.borderNone {
  border-bottom: none;
}
.col-333333{
  color: #333333!important;
}
.col-999999{
  color: #999999!important;
}

</style>
